<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/header.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title title-color">学生实习调查问卷查看</h1>
		</header>

		<div class="mui-content">
			
			<ul id="ul_students" class="mui-table-view">
			    <!-- <li class="student_li mui-table-view-cell mui-media">
				    <img style="max-width: 80px; height: 80px;" class="mui-media-object mui-pull-left" src="../../images/default_head_portrait.gif">
				    <div class="mui-media-body">
						<div>
							<label>学号：2017211751</label>
						</div>
						<div>
							<label>姓名：汤倩&nbsp;&nbsp;班级：空间17</label>
						</div>
						<div>
							<label style="display:-webkit-box;-webkit-line-clamp:1; -webkit-box-orient:vertical; overflow: hidden; text-overflow:ellipsis; ">
								实习公司：北京红海无限游戏公司
							</label>
						</div>
						<div>
							<label>填写问卷数：3 &nbsp;&nbsp;<a user_id="2017211751" href="javascript:void(0)" class="mui-icon mui-icon-info link_see_questionnaires"></a></label>
						</div>
						
				    </div>
			    </li>
				<li class="mui-table-view-cell mui-collapse">
					<a class="mui-navigate-right" href="#">
					</a>
					<div class="mui-collapse-content">
						<p>问卷1</p>
						<div class="mui-content" style="font-family: 'microsoft yahei'">
							<div class="mui-card">
								<h5 class="mui-card-content-inner" style="color: black; font-weight: bold">具体所在地点</h5>
								<div class="mui-input-group">
									<div class="mui-input-row">
										<label>经度</label>
									</div>
								</div>
								<h5 class="mui-card-content-inner" style="color: black; font-weight: bold">具体所在地点</h5>
								<div class="mui-input-group">
									<div class="mui-input-row">
										<label>经度</label>
									</div>
								</div>
							</div>
						</div>
					</div>
				</li> -->
			</ul>

		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript">
			mui.init()
			var userinfo;
			mui.plusReady(function() {
				userinfo = app.getGlobalUserInfo();
				// 加载所带学生实习信息和问卷数
				loadStudentInternshipInfoAndQuestionnaireCount();
			});
			
			// 加载所带学生实习信息和问卷数
			function loadStudentInternshipInfoAndQuestionnaireCount() {
				mui.ajax(app.serverUrl + "/user/teacher/loadStudentInternshipInfoAndQuestionnaireCount", {
					data:{
						user_id: userinfo.user_id
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'},	              
					success:function(data){
						if(data.status == 200) {
							// 获取页面ul元素
							var ul_students = document.getElementById("ul_students");
							var students = data.data;
							var student_lis = [];
							for(var i = 0; i < students.length; i++) {
								student_lis.push(renderDataLi(students[i]));
							}
							ul_students.innerHTML = student_lis.join("");
							
							// 给每一项填写问卷数据旁的详情图标添加点击事件
							mui(".student_li").on("tap", ".link_see_questionnaires", function() {
								// console.log("user_id:" + this.getAttribute("user_id"));
								// 查看学生的调查问卷
								mui.openWindow({
									url: "teacherSeeStudentQuestionnaire.html",
									id: "teacherSeeStudentQuestionnaire.html",
									extras: {
										friendUserinfo: friendUserinfo
									}
								});
							});
							// 关闭下拉加载提示
							//mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
						} else {
							app.showToast(data.msg, "error");
						}
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						console.log(type);
					}
				});
			}
			
			// 渲染资料列表中的某一项的HTML
			function renderDataLi(student) {
				var e_name = "暂无";
				var q_count = 0;
				if(app.isNotNull(student.e_name)) {
					e_name = student.e_name;
				}
				if(app.isNotNull(student.q_count)) {
					q_count = student.q_count;
				}
				var li_html = '<li class="student_li mui-table-view-cell mui-media">' +
								  '<img style="max-width: 80px; height: 80px;" class="mui-media-object mui-pull-left" src="' + app.imgServerUrl + student.head_portrait_url_small + '">' +
								  '<div class="mui-media-body">' +
									  '<div>' +
										  '<label>学号：' + student.user_id + '</label>' +
									  '</div>' +
									  '<div>' +
										  '<label>姓名：' + student.name + '&nbsp;&nbsp;班级：' + student.class_name + '</label>' +
									  '</div>' +
									  '<div>' +
										  '<label style="display:-webkit-box;-webkit-line-clamp:1; -webkit-box-orient:vertical; overflow: hidden; text-overflow:ellipsis; ">' +
											  '实习公司：' + e_name +
										  '</label>' +
									  '</div>' +
									  '<div>' +
										  '<label>填写问卷数：' + q_count + '&nbsp;&nbsp;<a style="' + (q_count == 0 ? 'display: none' : '') + '" user_id="' + student.user_id + '" href="javascript:void(0)" class="mui-icon mui-icon-info link_see_questionnaires"></a></label>' +
									  '</div>' +
								  '</div>' +
							  '</li>';
				if(app.isNotNull(student.questionnaireMap)) {
					var questionnaireMap = student.questionnaireMap;
					li_html += '<li class="mui-table-view-cell mui-collapse">' +
								   '<a class="mui-navigate-right" href="#">问卷详情</a>' +
								   '<div class="mui-collapse-content">';

					var k = 1;
					for(var date in questionnaireMap) {
						li_html += '<p>问卷' + (k++) + '，填写日期：' + date + '</p>' +
								   '<div class="mui-content" style="font-family: \'microsoft yahei\'">' +
									   '<div class="mui-card">';
						for(var i = 0; i < questionnaireMap[date].length; i++) {
							li_html += '<h5 class="mui-card-content-inner" style="color: black; font-weight: bold">' + questionnaireMap[date][i].question + '</h5>' +
										'<div class="mui-input-group">' +
											'<div class="mui-input-row">' +
												'<label>' + questionnaireMap[date][i].answer + '</label>' +
											'</div>' +
										'</div>';
						}
						li_html += 		'</div>' +
								   '</div>';
									   
					}

						li_html += '</div>' +
						 '</li>';
				}
				return li_html;
			}
		</script>
	</body>

</html>